<template>
  <div class="online-apply">
    <md-row class="row-b06d4a">
      <md-col :span="24">
        <md-steps
          class="md-steps-0b9856"
          :vertical-adaptive="false"
          :transition="false"
          :direction="'horizontal'"
          :current="0"
          :steps="widget_4d7c9d.options.options"
        ></md-steps>
        <span class="span-2a28a6">{{ widget_918165.options.content }}</span>
        <span class="span-1058aa">{{ widget_dd1806.options.content }}</span>
      </md-col>
    </md-row>
    <md-row class="sec-box">
      <md-col :span="24">
        <p class="span-e705f4">
          {{ widget_0d0377.options.content
          }}<span>{{ cardInfo.creditName}}</span>
        </p>
        <div class="div-42d2e4">
          <img class="img-5badfa" :src="cardInfo.picUrl" />
        </div>
      </md-col>
    </md-row>
    <md-row class="sec-box">
      <md-col :span="24">
        <md-input-item
          v-model="widget_658428.options.defaultValue"
          :type="'text'"
          :name="'中文姓名'"
          :title="'中文姓名'"
          :placeholder="'请输入您的中文姓名'"
          :brief="''"
          :maxlength="25"
          :size="'normal'"
          :align="'left'"
          :error="errors.first('中文姓名')"
          :readonly="false"
          :disabled="false"
          :is-title-latent="false"
          :is-highlight="false"
          :is-formative="true"
          :is-amount="false"
          :clearable="false"
          :is-virtual-keyboard="false"
          :virtual-keyboard-disorder="false"
          :virtual-keyboard-ok-text="'确认'"
          v-validate="'required'"
        ></md-input-item>
        <md-row>
          <md-col :span="24">
            <md-input-item
              v-model="widget_1c309a.options.defaultValue"
              :type="'text'"
              :name="'姓拼音'"
              :title="'姓拼音'"
              :placeholder="'请输入内容'"
              :brief="''"
              :maxlength="25"
              :size="'normal'"
              :align="'left'"
              :error="errors.first('姓拼音')"
              :readonly="false"
              :disabled="false"
              :is-title-latent="false"
              :is-highlight="false"
              :is-formative="true"
              :is-amount="false"
              :clearable="false"
              :is-virtual-keyboard="false"
              :virtual-keyboard-disorder="false"
              :virtual-keyboard-ok-text="'确认'"
              v-validate="'required'"
            ></md-input-item>
          </md-col>
          <md-col :span="24" class="pd_l10">
            <md-input-item
              v-model="widget_140549.options.defaultValue"
              :type="'text'"
              :name="'名拼音'"
              :title="'名拼音'"
              :placeholder="'请输入内容'"
              :brief="''"
              :maxlength="25"
              :size="'normal'"
              :align="'left'"
              :error="errors.first('名拼音')"
              :readonly="false"
              :disabled="false"
              :is-title-latent="false"
              :is-highlight="false"
              :is-formative="true"
              :is-amount="false"
              :clearable="false"
              :is-virtual-keyboard="false"
              :virtual-keyboard-disorder="false"
              :virtual-keyboard-ok-text="'确认'"
              v-validate="'required'"
            ></md-input-item>
          </md-col>
        </md-row>
        <md-input-item
          v-model="widget_7b80eb.options.defaultValue"
          :type="'text'"
          :name="'身份证号码'"
          :title="'身份证号码'"
          :placeholder="'请输入您的身份证号码'"
          :brief="''"
          :maxlength="25"
          :size="'normal'"
          :align="'left'"
          :error="errors.first('身份证号码')"
          :readonly="false"
          :disabled="false"
          :is-title-latent="false"
          :is-highlight="false"
          :is-formative="true"
          :is-amount="false"
          :clearable="false"
          :is-virtual-keyboard="false"
          :virtual-keyboard-disorder="false"
          :virtual-keyboard-ok-text="'确认'"
          v-validate="'required'"
        ></md-input-item>
        <div>
          <md-field-item
            :align="'right'"
            :title="'所在城市'"
            :content="widget_549023.options.selectValue.label"
            @click="widget_549023.options.isSelectorShow = true"
            :arrow="true"
          />
          <md-selector
            v-model="widget_549023.options.isSelectorShow"
            :data="
              widget_549023.options.remote
                ? widget_549023.options.remoteOptions
                : widget_549023.options.options
            "
            :title="'下拉选择器'"
            :describe="''"
            :mask-closable="true"
            :is-check="false"
            :default-value="widget_549023.options.selectValue.value"
            @choose="
              item => {
                this.widget_549023.options.selectValue = item;
              }
            "
          ></md-selector>
        </div>
        <span
          @click="$bridge.toZipPage(widget_38ceda.options.path)"
          class="span-cb8ab1"
          >{{ widget_38ceda.options.content }}</span
        >
      </md-col>
    </md-row>
    <md-row class="sec-box">
      <md-col :span="24">
        <md-input-item
          v-model="widget_4d00c6.options.defaultValue"
          :type="'text'"
          :name="'手机号码'"
          :title="'手机号码'"
          :placeholder="'该号码将作为您的信用卡预留号码'"
          :brief="''"
          :maxlength="25"
          :size="'normal'"
          :align="'left'"
          :error="errors.first('手机号码')"
          :readonly="false"
          :disabled="false"
          :is-title-latent="false"
          :is-highlight="false"
          :is-formative="true"
          :is-amount="false"
          :clearable="false"
          :is-virtual-keyboard="false"
          :virtual-keyboard-disorder="false"
          :virtual-keyboard-ok-text="'确认'"
          v-validate="'required'"
        ></md-input-item>
        <md-input-item
          v-model="widget_4af89b.options.defaultValue"
          :type="'text'"
          :name="'验证码'"
          :title="'验证码'"
          :placeholder="'请输入内容'"
          :brief="''"
          :maxlength="25"
          :size="'normal'"
          :align="'left'"
          :error="errors.first('验证码')"
          :readonly="false"
          :disabled="false"
          :is-title-latent="false"
          :is-highlight="false"
          :is-formative="true"
          :is-amount="false"
          :clearable="false"
          :is-virtual-keyboard="false"
          :virtual-keyboard-disorder="false"
          :virtual-keyboard-ok-text="'确认'"
          v-validate="'required'"
        >
          <verify-code
            slot="right"
            :text="'获取验证码'"
            :count="60"
          ></verify-code>
        </md-input-item>
      </md-col>
    </md-row>
    <md-row class="div-b14809">
      <md-col :span="24"
        ><md-button
          :type="'primary'"
          :nativeType="'button'"
          :size="'normal'"
          :plain="false"
          :round="false"
          :inline="false"
          :icon="''"
          :icon-svg="false"
          :inactive="false"
          @click.prevent="submitForm"
          :iconAlign="'left'"
          >{{ widget_0d5ddf.options.defaultValue }}</md-button
        ></md-col
      >
    </md-row>
    <md-row>
      <md-col :span="24" class="protol-box">
        <p><input type="checkbox" class="checkbox"/>本人已阅读并知晓<a href="javascript:void(0);" @click.prevent="showPopUp">《上海银行信用卡章程》</a><a href="javascript:void(0);" @click.prevent="showPopUp">《上海银行信用卡领用合约》</a><a href="javascript:void(0);" @click.prevent="showPopUp">《上海银行信用卡收费标准》</a><a href="javascript:void(0);" @click.prevent="showPopUp">《重要提示》</a><a href="javascript:void(0);" @click.prevent="showPopUp">《声明、授权及签署》</a>所载内容，并授权上海银行对本人中国人民银行金融信用信息基础数据库等征信情况、申领信息真实性及其他有关方面的情况进行查询。
					</p>
        <p>！本人声明仅为中国税收居民，并已阅读<a href="javasript:void(0);" @click.prevent="showPopUp">税收声明重要提示</a><br/><small>若您非中国税收居民，或者既是中国税收居民又是其他国家（地区）税收居民，请至网点申请。</small></p>
      </md-col>
    </md-row>
    <md-popup v-model="widget_67af25.options.isPopupShow" :maskClosable="true" :position="'center'" :transition="''" :hasMask="true">
      <div class="div-6fe8fe">
        <h3>声明、授权及签署</h3>
        <p>
          请仔细阅读后签署：<br> 1. 以上填写内容填写完全属实，并同意上海银行向中国人民银行个人信用信息基础数据库等征信机构查核上述资料的真实性。<br> 2. 若成功申请联名信用卡，本人授权上海银行可以将本人的姓名、手机号码等信息披露给联名卡合作方。<br> 3. 本人授权同意申请该卡片即自动开通上海银行信用卡交易自动购汇功能，外币交易自动转换为人民币入账。（仅限VISA全球支付卡）。<br> 4. 本人同意接受上海银行通过短信、电子邮件、宣传单页等方式推荐的相关产品服务信息。（如您不同意本条声明授权之内容，可在卡片核发后致电上海银行客服热线修改。）<br> 5. 本人已阅读并了解《上海银行信用卡领用合约》和《上海银行信用卡章程》，知晓并同意将相关个人信息用于信用卡增值、账务催收等第三方机构及其他金融业务；自愿遵守合约和章程的规定，无论核准与否，本人同意此申请表及所附文件均由上海银行保留。<br> 6. 本人承诺如申请个人电子银行业务，已阅读并同意遵守《上海银行个人电子银行章程》和《个人电子银行服务协议》及相关业务规定。因违反规定而造成的损失和后果，本人愿意承担相应的法律责任。<br> 本人已阅读全部申请材料，充分了解并清楚知晓该信用卡产品的相关信息，愿意遵守领用合约的各项规则。领卡后，因使用上海银行信用卡而发生的一切息费及各项收付款项，授权贵行计入主卡人账户。<br>
        </p>
      </div>
    </md-popup>
  </div>
</template>

<script>
export default {
  name: 'OnlineApply',
  data() {
    return {
      widget_4d7c9d: {
        name: "步骤条",
        options: {
          multiple: false,
          options: [
            {
              name: "基本信息"
            },
            {
              name: "详细信息"
            },
            {
              name: "其他信息"
            },
            {
              name: "完成"
            }
          ],
          remote: false,
          props: {
            label: "label",
            value: "value"
          }
        },
        rules: []
      },
      widget_918165: {
        name: "文本框",
        options: {
          path: "",
          content: "特别提示"
        },
        rules: []
      },
      widget_dd1806: {
        name: "文本框",
        options: {
          path: "",
          content:
            "目前手机申请仅向持有在有效期内的二代身份证客户申请（不包括临时身份证）"
        },
        rules: []
      },
      widget_0d0377: {
        name: "文本框",
        options: {
          path: "",
          content: "您申请的是："
        },
        rules: []
      },
      widget_c40e0a: {
        name: "图片",
        options: {
          imageUrl:
            "http://118.144.87.37:13083/group1/M00/00/39/CgIEq11OiWCAVdgMAAEVc3XBaFo47.jpeg"
        },
        rules: []
      },
      widget_658428: {
        name: "输入框",
        options: {
          defaultValue: "",
          showLabel: false
        },
        rules: ["required"]
      },
      widget_1c309a: {
        name: "输入框",
        options: {
          defaultValue: "",
          showLabel: false
        },
        rules: ["required"]
      },
      widget_140549: {
        name: "输入框",
        options: {
          defaultValue: "",
          showLabel: false
        },
        rules: ["required"]
      },
      widget_7b80eb: {
        name: "输入框",
        options: {
          defaultValue: "",
          showLabel: false
        },
        rules: ["required"]
      },
      widget_549023: {
        name: "下拉选择器",
        options: {
          selectValue: {
            brief: "选项一说明",
            label: "上海",
            value: "1"
          },
          iconSvg: false,
          remoteOptions: [],
          isSelectorShow: false,
          icon: "",
          remote: false,
          props: {
            label: "label",
            value: "value"
          },
          minHeight: "auto",
          maxHeight: "auto",
          options: [
            {
              brief: "选项一说明",
              label: "上海",
              value: "1"
            },
            {
              brief: "选项二说明",
              label: "杭州",
              value: "2"
            }
          ],
          iconPosition: "right",
          iconSize: "",
          iconDisabled: "",
          iconInverse: ""
        },
        rules: []
      },
      widget_38ceda: {
        name: "文本框",
        options: {
          path: "",
          content: "如您所在的城市不在下拉框内，暂无法申请"
        },
        rules: []
      },
      widget_4d00c6: {
        name: "输入框",
        options: {
          defaultValue: "",
          showLabel: false
        },
        rules: ["required"]
      },
      widget_4af89b: {
        name: "验证码输入框",
        options: {
          defaultValue: "",
          showLabel: false
        },
        rules: ["required"]
      },
      widget_0d5ddf: {
        name: "按钮",
        options: {
          defaultValue: "提交",
          submitFunc:
            "/app/wiremock/D5419E20385D4A469B1383CF9183B6FD/transferResults.do",
          iconFlag: false
        },
        rules: []
      },
      widget_67af25: {
        name: "popup弹出层",
        options: {
          defaultValue: "弹出文本",
          isPopupShow: false
        },
        rules: []
      },
      cardId: "8D073DB57FE24A0CABD0088ACD7FD22C",
      cardInfo: {
        creditName: "光明勇士联名信用卡金卡（勇士联萌版）",
        picUrl: "group1/M00/00/39/CgIEq11OiWCAVdgMAAEVc3XBaFo47.jpeg"
      },
      isPopupShow: {}
    };
  },
  methods: {
    // 查询卡片信息
    queryCardInfo() {
      let params = {
        id: this.cardId
      };
      this.$remote("/runtime/poccredit/selectOne.action", params).then(data => {
        this.cardInfo = data
      });
    },
    // 提交表单数据
    submitForm() {
      this.$validator.validate().then(valid => {
        if (valid) {
          // TODO
          let params = {
            creditId: this.cardId,
            reqName: this.widget_658428.options.defaultValue,
            reqFirstName: this.widget_1c309a.options.defaultValue,
            reqLastName: this.widget_140549.options.defaultValue,
            reqId: this.widget_7b80eb.options.defaultValue,
            reqAddress: this.widget_549023.options.selectValue.value,
            reqMobile: this.widget_4d00c6.options.defaultValue,
            validCode: this.widget_4af89b.options.defaultValue,
            picUrl: this.cardInfo.picUrl
          };
          this.$remote("/runtime/poccreditreq/insertPocCreditReq.action", params).then(res => {
            this.$router.push({
              name: "onlineApplySuccess",
              query: {
                cardId: this.cardId
              }
            });
          });
        }
      });
    },
    showPopUp() {
      this.widget_67af25.options.isPopupShow = true;
    }
  },
  mounted() {
    sa.track("$pageview", {
      "$url_path": "onlineApply"
    })
  },
  created() {
    if (this.$route.query.id) {
      this.cardId = this.$route.query.id;
      sa.track("$CollecCreditFlowOverClick", {
        "$element_content": this.cardId
      });
      this.queryCardInfo();
    }
  }
};
</script>

<style scoped>
.pd_l10 {
  padding-left: 10px;
}
.md-steps-0b9856 {
  padding: 20px 20px 40px;
}

.span-2a28a6 {
  font-size: 16px;
  display: block;
  text-align: left;
  height: 30px;
  line-height: 30px;
}

.span-1058aa {
  font-size: 14px;
  display: block;
  text-align: left;
  line-height: 24px;
}

.row-b06d4a {
  border-radius: 0px;
  padding: 0px 15px 20px 15px;
  margin: 0px;
}

.span-e705f4 {
  font-size: 16px;
  display: block;
  height: 30px;
  text-align: left;
  line-height: 30px;
}

.span-e705f4 span {
  color: #06469e;
}
.div-42d2e4 {
  height: auto;
  width: 100%;
}

.img-5badfa {
  display: block;
  height: 160px;
  width: 240px;
  margin: auto;
}

.sec-box {
  border-radius: 0px;
  padding: 15px;
  margin: 10px 0 0;
}

.span-cb8ab1 {
  display: block;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  text-align: left;
  color: #06469e;
  margin-top: 10px;
}
.div-b14809 {
  margin-top: 15px;
  padding: 0 15px 20px;
  background: inherit;
}
.div-b14809 .md-button {
  font-size: 16px;
  background: #06469e;
}
.div-b14809 .md-button.primary::after {
  border-color: #06469e;
}
.online-apply >>> .md-field-item-title {
  text-align: left;
}
.online-apply >>> .md-cell-item-body.multilines {
  padding: 0;
}
.online-apply >>> .verify-btn {
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  color: #ffffff;
  background: #06469e;
  border: 1px solid #06469e;
}
.online-apply >>> .verify-btn.is-disabled {
  background: #808591;
  border: 1px solid #808591;
}
.protol-box {
  padding: 5px 15px 20px;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  background: #f6f6f6
}
.protol-box p {
  margin-bottom: 10px;
}
.protol-box .checkbox {
  -ms-appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
}
.protol-box .checkbox::before {
  content: "";
  display: inline-block;
  vertical-align: top;
  margin-right: 3px;
  width: 14px;
  height: 14px;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  transition: border-color 0.3s linear;
}
.protol-box .checkbox:checked::before {
  border-color: #06469e;
  background: url('') no-repeat center center;
  background-size: 12px;
}
.protol-box a {
  text-decoration: none;
  color: #06469e;
  cursor: pointer;
}
.div-6fe8fe h3{
  font-size: 18px;
  font-weight: 500;
  color: #06469e;
}
.div-6fe8fe p {
  text-align: left;
  line-height: 24px;
  font-size: 14px;
  color: #06469e;
  padding: 0 15px 20px;
}
.online-apply >>> .md-popup-box {
  width: 90%;
  max-height: 90%;
  background: #ffffff;
}
.online-apply >>> .md-steps .step-wrapper.current .icon-wrapper, 
.online-apply >>> .md-steps .step-wrapper.reached .icon-wrapper,
.online-apply >>> .md-steps.md-steps-horizontal .step-wrapper.current .text-wrapper .name{
  color: #06469e;
}
</style>
